<template>
  <el-dialog
    v-model="props.selectorVisible"
    top="10vh"
    draggable
    overflow
    :title="props.title"
    :before-close="handleClose"
  >
    <div class="cus-dialog-body">
      <CLTable
        ref="tableRef"
        :fields="filteredFields"
        :initial-data="processedTableData"
        :tableConfig="props.tableConfig"
      />
    </div>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="handleClose">取消</el-button>
        <el-button type="primary" @click="handleSubmit">确定 </el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script setup lang="ts">
  import CLTable from "@/components/CLTable/index.vue";
  import type {
    DynamicField,
    ProjectNode,
  } from "@/components/CLTable/interface.ts";
  import { computed, ref, watch } from "vue";
  interface propsDefine {
    title: string;
    selectorVisible: boolean;
    fields: DynamicField[];
    tableData: ProjectNode[];
    routerFields?: string[];
    tableConfig?: Record<string, any>;
    currentAssignee?: string[];
  }
  const emit = defineEmits<{
    "selector:nodes": [action: string, nodes: ProjectNode[]];
    "update:selectorVisible": [visible: boolean];
  }>();
  const props = defineProps<propsDefine>();
  const records = ref<ProjectNode[]>([]);
  const handleClose = () => {
    console.log("props", props.tableData);
    emit("update:selectorVisible", false);
  };
  const tableRef = ref();
  const handleSubmit = () => {
    records.value = tableRef.value.getSelectedNames(props.routerFields?.[2]);
    console.log("records", records.value);
    emit("selector:nodes", "selectorUserName", records.value);
    handleClose();
  };
  const filteredFields = computed(() => {
    return props.fields.filter((field) =>
      props.routerFields?.includes(field.field),
    );
  });
  const processedTableData = ref();
  const tableDataFn = () => {
    if (!props.currentAssignee) {
      processedTableData.value = props.tableData;
      return;
    }
    const processNodes = (node: ProjectNode[]): ProjectNode[] => {
      return node.map((node) => {
        const processNode = { ...node };
        const fieldName = processNode[props.routerFields?.[2]];
        if (Array.isArray(fieldName)) {
          fieldName.forEach((name) => {
            if (props.currentAssignee?.includes(name))
              processNode._vtable_rowSeries_number = true;
          });
        } else {
          if (props.currentAssignee?.includes(fieldName)) {
            processNode._vtable_rowSeries_number = true;
          }
        }
        return processNode;
      });
    };
    processedTableData.value = processNodes(props.tableData);
  };
  watch(
    () => props.selectorVisible,
    (visible) => {
      if (visible) {
        //延迟时间后在调用
        setTimeout(() => {
          tableDataFn();
        }, 100);
      }
    },
    { immediate: true },
  );
</script>

<style lang="scss">
  .cus-dialog-body {
    .pagination-container {
      border-top: none;
      padding: 15px 0 0 0;
    }
    .el-overlay {
      position: static !important;
    }
  }
</style>
